<template>
  <div class="dialogBox">
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show">
        <p class="p1">
          <img src="../common/imgs/rechargeInVerfy.png" alt="">
        </p>
        <p class="p2">充值审核中</p>
        <p class="p3">您已有正在审核中的对公充值<br>请耐心等待</p>
        <p class="p4">
          <img src="../common/imgs/redGth.png" alt="">
          <span>一笔转账重复发起充值将会导致无法入账，请谨慎操作！</span>
        </p>
        <div class="setting">
          <button class="yellowbtn sure" @click.stop="callback">发起新的充值</button>
          <button class="yellowbtn cancel" @click.stop="cancel">耐心等待</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "DiaLog_b",
    data(){
      return{
        introduce:'会话弹窗2',
        show:false,
        showCover:false,
        reminderInfo:'',
        timeout:'',//定时器
        submitTxt : '',
        content : '',
      }
    },
    props: {
      'title': {
        /*组件中配置的提示文字*/
        type: String,
        default: '提示文字'
      },
      reminderContent : {
        /*提示内容*/
        type: String,
        default: ' '
      },
      'confirmBtn':{
        /*确定按钮文字*/
        type: String,
        default: '确定'
      }
    },
    mounted() {
      this.reminderInfo = this.title ? this.title  : '提示文字';
      this.submitTxt = this.confirmBtn ? this.confirmBtn  : '确定';
      this.content = this.reminderContent ? this.reminderContent : ' ';
      this.$emit('success');
    },
    methods:{
      changeToast(mes){
        //动态改变提示标题
        if( mes ){
          this.reminderInfo = mes;
        }
      },
      changeContent( html ){
        //动态改变提示内容
        if( html ){
          this.content = html;
        }
      },
      callback(){
        /*点击确定*/
        this.hide();
        this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
      },
      cancel(){
        let thiz = this;
        thiz.hide();
        // thiz.$router.go(-1);
      },
      hide(){
        /*隐藏弹窗*/
        let thiz = this;
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
        this.show = false;
        thiz.timeout = setTimeout(function () {
          thiz.showCover = false;
          clearTimeout(thiz.timeout);
          thiz.timeout = null;
        },200);
        // thiz.canScroll();/*关闭弹窗，让页面可以上下移动*/
      },
      dialogShow(){
        /*显示弹窗*/
        this.show = true;
        this.showCover = true;
        //this.noScroll();/*显示弹窗，让页面无法上下移动*/
      }
    },
    destroyed() {
      this.hide();
      let thiz = this;
      clearTimeout(thiz.timeout);
      thiz.timeout = null;
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  .window{
    padding:0.52rem;padding-top:0.4rem;padding-bottom: 1.3rem;width: 5.48rem;position: fixed;height: 6.4rem;
    top:50%;left: 50%;margin-left:-2.74rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;text-align: center;
    >.p1{
      >img{
        width: 1.24rem;
      }
    }
    >.p2{
      font-size: 0.28rem;color: #262626;padding-top: 0.18rem;
    }
    >.p3{
      color: #999;font-size: 0.26rem;line-height: 150%;padding-top: 0.16rem;
    }
    >.p4{
      background: rgba(248, 143, 143, 0.10);padding: 0.12rem 0.28rem;color: #EE6767;text-align: left;overflow: hidden;border-radius: 0.04rem;margin-top: 0.22rem;
      >img{
        vertical-align: middle;width: 0.22rem;height: 0.22rem;float: left;margin-top: 0.04rem;
      }
      >span{
        font-size: 0.22rem;vertical-align: middle;float: left;display: inline-block;width: calc( 100% - 0.22rem );line-height: 140%;padding-left: 0.08rem;
      }
    }
    .setting{
      text-align: center;width:100%;background: #fff;padding:0.28rem 0.41rem;padding-bottom: 0;
      button{
        margin: 0;padding:0;display: inline-block;border-radius: 1rem;
        box-sizing: border-box;width: 100%;height: 0.7rem;line-height: 0.7rem;border: 0;border-radius:1rem;font-size:0.26rem
      }
      >.cancel{
        background: #fff;border: 0.01rem solid #dcdcdc;color: #595959;margin-top: 0.24rem;
      }
    }
    .closeWindow{
      width: 0.70rem;height: 0.70rem;padding: 0.22rem;position: absolute;right: 0;top:0;background: none;
      img{width: 0.26rem;height: 0.26rem}
    }
  }
  /*动画*/
  .window{
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  @media screen and (min-width: 1025px) {
    .window{width: 400px;left: 50%;margin-left:-200px;}
  }
</style>
